<template lang="html">
  <article id="views-court_detail">
    <div class="court_detail-wrapper">
      <CourtItem
        v-if="courtDetail !==null"
        :componentType="'court_detail'"
        :courtDetail="courtDetail"
      ></CourtItem>

      <SelectDate
        :bookDate="bookDate"
        v-if="bookDate.length > 0"
      ></SelectDate>
      <div class="court_detail-divline">
        <span>Training</span>
      </div>
      <div class="court_detail-courseList">
        <CourseItem
          v-for="(courseDetail, index) in courseList"
          :key="courseDetail.subjectId"
          :courseDetail="courseDetail"
          v-if="index < 2 || !courseDetail.isEnd"
        ></CourseItem>
        <Loadmore v-on:loadmore="loadmore" v-show="!noCourses && canLoadmore"></Loadmore>
      </div>
    </div>
    <BackBtn></BackBtn>
  </article>
</template>

<script>
import superagent from 'superagent'
import utils from '@/lib/utils'
import authMiddleware from '@/lib/auth-middleware'

const isLoadmore = function(page){
  return function(req){
    if(!!page){
      req.query({ page })
    }
  }
}

export default {
  name: 'PageCourtDetail',
  components: {
    CourtItem: require('@/components/court_item'),
    CourseItem: require('@/components/index_list/course_item'),
    BackBtn: require('@/components/common_back_button'),
    Loadmore: require('@/components/common_loadmore'),
    SelectDate: require('@/components/select_date_book')
  },
  data(){
    return {
      containerEle: null,
      wrapperEle: null,
      screenHeight: 0,
      currentPage: 1,
      courtDetail: null,
      courseList: [],
      canLoadmore: true,
      bookDate: [
      {book_id: 1,date: '05.23', date_week: 'Monday'},
      {book_id: 2,date: '05.24', date_week: 'Monday'},
      {book_id: 3,date: '05.25', date_week: 'Monday'},
      {book_id: 4,date: '05.26', date_week: 'Monday'},
      {book_id: 5,date: '05.26', date_week: 'Monday'},
      {book_id: 6,date: '05.26', date_week: 'Monday'},
      {book_id: 7,date: '05.26', date_week: 'Monday'},
      {book_id: 8,date: '05.26', date_week: 'Monday'}
      ]
    }
  },
  computed: {
    noCourses(){
      return !this.courseList || this.courseList.length == 0
    }
  },
  created(){
    this.getCourtDetail({
      id: this.$route.params.court_id
    })
    .then(data => {
      this.courtDetail = data.store
      this.courseList = this.addCourseIsEnd(data.subjects.records)
    })
  },
  mounted(){
    this.screenHeight = window.innerHeight - document.querySelector('.components-common_back_button').offsetHeight
    this.containerEle = document.querySelector('#views-court_detail')
    this.wrapperEle = this.containerEle.querySelector('.court_detail-wrapper')
  },
  methods: {
    getCourtDetail({ id, page }){
      return new Promise((resolve, reject) => {
        superagent.post(`/api/store/show/${id}`)
          .use(isLoadmore(page))
          .use(authMiddleware())
          .end((err, res) => {
            if(res.ok){
              resolve(res.body.data)
            } else {
              reject(new Error('getCourtDetail error'))
            }
          })
      })
    },
    loadmore(){
      this.$store.dispatch('toggleIsLoading')
      this.getCourtDetail({
        id: this.$route.params.court_id,
        page: this.currentPage + 1
      })
      .then(data => {
        let newList = this.addCourseIsEnd(data.subjects.records)
        if(newList.length > 0){
          this.currentPage++
          this.courseList = this.courseList.slice(0).concat(newList)
        } else {
          utils.toast('All courses have been loaded')
          this.canLoadmore = false
        }
        this.$store.dispatch('toggleIsLoading')
      })
    },
    addCourseIsEnd(list){
      list.forEach(item => {
        item.isEnd = +new Date() > parseInt(item.endTime, 10)*1000
      })
      return list
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../css/config";
#views-court_detail{
  width: 100%;
  height: 100%;
  overflow: scroll;
  box-sizing: border-box;
  padding: 40px 25px $backbtn-height;
  background-color: $common-bg;
  .court_detail-wrapper{
    display: inline-block;
    width: 100%;
  }
  .court_detail-divline{
    position: relative;
    margin: 30px 0;
    width: 100%;
    height: 1px;
    padding: 10px 0;
    border-top: 1px solid $common-red;
    span{
      position: absolute;
      top: 0%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: block;
      padding: 0 40px;
      font-size: 24px;
      color: $common-red;
      background-color: $common-bg;
    }
  }
  .court_detail-courseList{
    padding-bottom: 25px;
  }
}
</style>
